{% extends base %}

{% block head %}

<link rel="stylesheet" type="text/css" href="/static/lib/webuploader/webuploader.css">
<script type="text/javascript" src="/static/lib/webuploader/webuploader.nolog.min.js"></script>
<script type="text/javascript" src="/static/lib/layer/layer.js"></script>

<style type="text/css">
    .fs-image {
        width: 180px;
    }
    .fs-path {
        padding: 5px;
        background-color: #eee;
    }
    .left {
        float: left;
    }
    .right {
        float: right;
    }
    .checkboxTd {
        width: 20px;
    }
        
    tr:hover td {
        background: none;
    }

    tr:hover {
        background-color: #eee;
    }

    #uploadFileArea {
        display: none;
    }

    .size-td {
        width: 100px;
    }
    .options-td {
        width: 100px;
    }

    #controlArea {
        margin-bottom: 5px;
    }

    #result {
        border: 1px solid #ccc;
        padding: 4px;
        background-color: #eee;
        margin: 0px;
        border-top: none;
        font-family: consolas, monospace;
    }

    .panel-title {
        width: 100%;
        border: 1px solid #ccc;
        padding-left: 5px;
        margin-top: 5px;
    }

    .plugin {
        margin-top: 5px;
    }

    .nav-path {
        padding: 5px;
        background-color: #eee;
    }

    .fs-main {
        background-color: white;
    }

    .fs-left {
        float: left;
        width: 20%;
        height: 500px;
        z-index: 100;
        overflow: auto;
    }

    .fs-preview {
        border-left: 1px solid #ccc;
        float: left;
        width: 80%;
        height: 500px;
        background-color: white;
    }
    #previewIframe {
        border: none;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .error {
        display: block;
    }

</style>

    {% set search_action = '/fs_find' %}
    {% set search_placeholder = '搜索文件' %}
{% end %}

{% block search_form %}
<input type="text" name="path" class="hide" value="{{?path}}"/>
{% end %}

{% block body %}

{% init error = "" %}
{% if error != "" %}
<div class="error col-md-12">{{error}}</div>
{% end %}

<div class="card">

{% include fs/component/fs_title.html %}
{% include mod_fs_path.html %}

<div class="col-md-12 fs-main file-list">
<div class="fs-left">
<table class="col-md-12 no-border-table fs-table">
{% for item in filelist %}
    {# 隐藏文件 #}
    {% if xconfig.FS_HIDE_FILES and (item.name[0] == "." or item.name.endswith((".pyc", ".class"))) %}
        {% continue %}
    {% end %}
    <tr>
        <td class="checkboxTd"><input type="checkbox" data-path="{{item.path}}" data-name="{{item.name}}"></td>
        <td>
        {% if item.type == "dir" %}
            <img src="/static/image/folder.gif"/>
            <a href="/fs/{{item.path}}?mode=sidebar" class="fs-folder">{{item.name}}</a>
        {% else %}
            <a data-path="{{item.path}}" class="fs-file">{{item.name}}</a>
        {% end %}
        </td>
    </tr>
{% end %}
</table>
</div>
<div class="fs-preview">
    <iframe id="previewIframe" src="/fs_api/plugins?path={{path}}&embed=true"></iframe>
</div>
</div>
</div>

<script type="text/javascript">
    var globalPath = "{{path}}";

    function showErrorMessage(message) {
        $(".error").text(message).fadeIn(200).delay(3000).fadeOut(300);
    }


    $(".command-btn").on("click", function () {
        var command = $(this).attr("data-command");
        $.get("/system/command", {command: command, path: globalPath});
    })

    $(function () {
        adjustHeight(".fs-left", 20);
        adjustHeight(".fs-preview", 20);
        $(".fs-file").click(function (e) {
            var path = $(e.target).attr("data-path");
            $("#previewIframe").attr("src", "/fs_preview?path=" + path)
        })
    })
</script>

{% end %}

{% block aside %}
    {% include fs/mod_aside.html %}
{% end %}